<template>
  <div class="container">
    <headerBar :title="local.logisicList" @changeLan="changeLan" :isNoReturn="true"></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}">
      <div class="page__bd" style="width: 100%;">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <input
                type="search"
                class="weui-search-bar__input"
                v-model="inputVal"
                :placeholder="local.searchLogisticsorderNo"
                @confirm="inputTyping"
              />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
              <span
                style=";position:absolute;right: 11px;bottom: 2px;"
                :hidden="!inputShowed"
                @click="hideInput"
              ></span>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">{{local.search}}</div>
            </label>
          </div>
          <div
            class="weui-search-bar__cancel-btn"
            :hidden="!inputShowed"
            @click="inputTyping"
          >{{local.search}}</div>
        </div>
      </div>
      <div class="filter">
        <div class="filter-left">
          <div>{{local.screen}}：</div>
          <div @click="openDialogRight">{{local.time}}</div>
          <!--          <div>|</div>-->
          <!--          <div @click="openDialogRight">{{local.workshopStaff}}</div>-->
          <div>|</div>
          <div @click="openDialog">{{local.warehouse}}</div>
        </div>
        <div class="clear-filter" @click="clearChoose">{{local.clearfilter}}</div>
      </div>
      <template v-if="logisticsList.length == 0">
        <div class="stock-in-record nodata-wrap">
          <img src="/static/style/block.png" class="nodata-img" />
          <p class="nodata-txt">{{local.nodata}}</p>
        </div>
      </template>
      <div v-else class="stock-in-list">
        <div class="stock-in-record" v-for="(item, index) in logisticsList" :key="index">
          <div class="record-Number jt_flex jt_flex_dr">
            <div
              class="circle jt_flex jt_flex_der jt_flex_row_center iconfont"
              @click="changeColor(item)"
              :class="item.checked ? 'iconselect' : ''"
            ></div>
            <div class="number jt_flex">{{local.logisticsOrderNo}}：{{item.trackNumber}}</div>
          </div>
          <div @click="toLogistics(item.id)" class="ml_18" style="width: 100%">
            <div class="record-supplier">
              <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_120'">{{local.workshopStaff}}：</span>
              <div>{{item.userName}}</div>
            </div>
            <div class="record-goods">
              <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_120'">{{local.boxCount}}：</span>
              <div>{{item.boxCount}} {{local.boxUnit}}</div>
            </div>
            <div class="record-warehouse">
              <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_120'">{{local.portOfDeparture}}：</span>
              <div>{{item.departHarbor}}</div>
            </div>
            <div class="record-warehouse">
              <span
                :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_120'"
              >{{local.portOfDestination}}：</span>
              <div>{{item.purposeHarbor}}</div>
            </div>
            <div class="record-warehouse">
              <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_120'">{{local.businessDate}}：</span>
              <div>{{item.busDate}}</div>
            </div>
          </div>
        </div>
      </div>

      <!--新增的时候选择销售单，把他存到saleslist里面，然后再在填物流的详情页面把saleslist取出来，显示，下面填一下单号，submit一下-->
      <!-- <div class="bottom-bar">
        <div class="btn-wrap">
          <div @click="routerToUrl('../../pages/addLogistics/index')">{{local.add}}</div>
        </div>
      </div>-->
    </div>

    <!-- 右侧弹窗，筛选条件-->
    <div class="modalRight" v-if="modalFlagRight" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlagRight = false"></div>
      <div class="dialog">
        <div class="tip-name">{{local.logisticsOrderNo}}:</div>
        <input v-model="trackNumber" :placeholder="local.peleaseEnter" />
        <!--        <div class="tip-name">{{local.workshopStaff}}:</div>-->
        <!--        <picker class="weui-btn" @change="PickerWorkshopStaffChange" :value="indexWorkshopStaffPicker" :range="userArray" :range-key="'userName'">-->
        <!--          <input type="default" v-model="workshopStaff" :placeholder="local.option" disabled/>-->
        <!--        </picker>-->
        <div class="tip-name">{{local.selectTime}}:</div>
        <picker class="weui-btn flex" :value="date" mode="date" @change="DateChange">
          <input v-model="startTimeFormat" disabled :placeholder="local.option" />
        </picker>
        <div class="tip-name">-</div>
        <picker
          class="weui-btn flex"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChangeEnd"
        >
          <input v-model="endTimeFormat" disabled :placeholder="local.option" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeDialogRight">{{local.cancel}}</div>
          <div class="confirm-btn" @click="searchBytip()">{{local.confirm}}</div>
        </div>
      </div>
    </div>

    <!-- 仓库弹出层 -->
    <div class="modal" v-if="modalFlag" catchtouchmove="true">
      <div style="width: 100%; height: 100%;" @click="modalFlag = false"></div>
      <div class="ware-dialog" scroll-y="true" style="border-radius: 9px;">
        <div class="header">
          {{ local.selectWarehouse }}
          <div class="text">{{ selected }}</div>
        </div>
        <div class="containera">
          <scroll-view style="height: 100%;" scroll-y="true">
            <div
              v-for="(item, index) in warehouseList"
              :key="index"
              class="ware-item"
              @click="changeWareColor(item, index)"
            >
              <div class="ware-item-left">
                <div class="num">{{ index + 1 }}</div>
                <div class="name">{{ item.warehouseName }}</div>
              </div>
              <i class="iconfont iconselect1" :style="item.selected ? 'color:#5AC8FA' : ''"></i>
            </div>
          </scroll-view>
        </div>
        <div class="bottom" @click="searchBytip()">{{ local.confirm }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import home from "@/api/home"
import card from "@/components/card"
import headerBar from "@/components/headerBar"
import { formatDate, filterParams } from "@/utils/index"
export default {
  components: {
    card,
    headerBar,
  },
  computed: {
    selected() {
      return this.warehouseList
        .filter(item => item.selected)
        .reduce((prv, next) => `${prv}${next.warehouseName},`, "已选择仓库:")
    },
    startTimeFormat(){
      return this.startTime ? wx.$timeFormat(this.startTime) : '' // new Date(this.startTime).$format('dd/MM/yyyy') : ''
    },
    endTimeFormat(){
      return this.endTime ? wx.$timeFormat(this.endTime) : '' //new Date(this.endTime).$format('dd/MM/yyyy') : ''
    }
  },
  onLoad() {
    this.initLang()
    var myDate = new Date()
    this.startTime = formatDate(myDate, "YYYY-MM-DD")
    this.endTime = formatDate(myDate, "YYYY-MM-DD")
    this.getWarehouseList()
  },
  async onReachBottom() {
    if (
      this.pageNum < parseInt((this.total + this.pageSize - 1) / this.pageSize)
    ) {
      // 如果当前页面小于最后一页
      this.pageNum = this.pageNum + 1 // 把当前页面，变成下一页面的页面数
      this.getLogisticsList() // 进行对后台数据的请求
    } else {
      wx.showToast({
        // 如果当前页面处于最后一页，就提示没有数据了
        title: "没有更多了",
        icon: "none",
        duration: 2000,
      })
    }
  },
  // 下拉刷新
  async onPullDownRefresh() {
    this.pageNum = 1 // 只请求第一页面的列表数据
    this.getLogisticsList() // 进行数据的请求
    wx.stopPullDownRefresh() // 停止下拉刷新
  },
  onShow() {
    this.initLang()
    this.getLogisticsList()
    this.pdt = this.globalData.CustomBar
    this.initMyData()
    // this.initMyData()
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
      this.lang = wx.getStorageSync('lang')
    },
    getWarehouseList() {
      wx.showLoading({title: this.local.loading})
      home.getWarehouseList().then(res => {
        wx.hideLoading()
        const { rows, code, msg } = res
        this.modalFlagRight = false
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.warehouseList = rows
      })
    },
    //仓库更换颜色
    changeWareColor(item, index) {
      this.warehouseList.forEach(element => {
        if (element.warehouseId == item.warehouseId) {
          element.selected = true
          this.warehouseId = element.warehouseId
          return
        }
        element.selected = false
      })
      this.warehouseList.push()
    },
    initMyData() {
      var pages = getCurrentPages()
      var currPage = pages[pages.length - 1] //当前页面
      let myData = currPage.data.mydata
      this.mydata.id = myData ? myData.id : ""
      this.mydata.name = myData ? myData.name : ""
    },
    // 清空搜索条件
    clearChoose() {
      this.startTime = ""
      this.endTime = ""
      this.trackNumber = ""
      this.userId = ""
      this.getLogisticsList()
    },
    openDialog() {
      this.modalFlag = true
    },
    closeDialog() {
      this.modalFlag = false
    },
    openDialogRight() {
      this.modalFlagRight = true
    },
    closeDialogRight() {
      this.modalFlagRight = false
    },
    //车间人员选择
    PickerWorkshopStaffChange(e) {
      this.indexWorkshopStaffPicker = e.mp.detail.value
      this.workshopStaff = this.userArray[e.mp.detail.value].userName
      this.userId = this.userArray[e.mp.detail.value].userId
    },
    DateChange(e) {
      this.startTime = e.mp.detail.value
    },
    DateChangeEnd(e) {
      this.endTime = e.mp.detail.value
    },
    async searchBytip() {
      let that = this
      this.modalFlagRight = false
      this.modalFlag = false
      // 这里面是查询,
      let flagParams = {
        "params[startTime]": this.startTime,
        "params[endTime]": this.endTime,
        userId: this.userId,
        trackNumber: this.trackNumber,
        warehouseId: this.warehouseId
      }
      let params = filterParams(flagParams)
      wx.showLoading({
        title: this.local.loading,
      })
      home.getLogisticsList(params).then(res => {
        wx.hideLoading()
        const { rows, code, msg } = res
        this.modalFlagRight = false
        if (code !== 0) {
          wx.showToast({
            title: msg,
            icon: "none",
            duration: 2000
          })
          return
        }
        rows.map(item => {
          item.checked = false
          item.busDate = item.busDate ? item.busDate.substring(0, 10) : ""
        })
        that.logisticsList = rows
      }).catch(err => {
        wx.hideLoading()
      })
    },
    changeColor(item) {
      item.checked = !item.checked
      wx.navigateTo({
        url: `../../pages/logisticsDetail/index?id=${item.id}`,
      })
    },
    toLogistics(id) {
      this.logisticsList.map(item => {
        item.checked = item.id == id ? true : false
        if (item.saleOrderId == id) {
          wx.setStorageSync("logisticsDetail", item)
        }
      })
      wx.navigateTo({
        url: `../../pages/logisticsDetail/index?id=${id}&flag=true`,
      })
    },
    changeLan(val, lang) {
      this.local = val
      this.lang = lang
    },
    async getLogisticsList() {
      wx.showLoading({title: this.local.loading})
      home.getLogisticsList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then(res => {
        wx.hideLoading()
        const {rows, code, msg, total} = res
        this.modalFlagRight = false
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        rows.map(item => {
          item.checked = false
          item.busDate = item.busDate ? wx.$timeFormat(item.busDate) : '' //new Date(item.busDate).$format('dd/MM/yyyy') :'' //item.busDate.substring(0, 10) : ""
        })
        this.total = total
        if (this.pageNum == 1) {
          this.logisticsList = rows
        } else {
          this.logisticsList = this.logisticsList.concat(rows)
        }
      })
    },
    async getLogisticsListBycCode(trackNumber) {
      wx.showLoading({title: this.local.loading})
      home.getLogisticsList({ trackNumber: trackNumber }).then(res => {
        wx.hideLoading()
        const {rows, code, msg} = res
        this.modalFlagRight = false
        if (code != 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.logisticsList = rows
        rows.map(item => {
          item.checked = false
          item.busDate = item.busDate ? wx.$timeFormat(item.busDate) : ''  //new Date(item.busDate).$format('dd/MM/yyyy') : '' //item.busDate.substring(0, 10) : ""
        })
      })
    },
    routerToUrl(url) {
      wx.navigateTo({
        url,
      })
    },
    TimeChange(e) {
    },
    showInput() {
      this.inputShowed = true
    },
    hideInput() {
      this.inputVal = ""
      this.inputShowed = false
    },
    clearInput() {
      this.inputVal = ""
    },
    inputTyping(e) {
      this.getLogisticsListBycCode(this.inputVal)
    },
  },
  data() {
    return {
      lang: wx.getStorageSync('lang'),
      mydata: {
        id: "",
        name: "",
      },
      pageNum: 1,
      pageSize: 7,
      total: 0,
      trackNumber: "",
      isBlock: false,
      supplierId: "",
      startTime: "",
      endTime: "",
      beltType: "",
      modalFlagRight: false,
      modalFlag: false,
      Listids: [],
      pdt: 66,
      local: wx.getStorageSync("local"),
      logisticsList: [],
      inputShowed: false,
      inputVal: "",
      logs: [],
      time: "12:01",
      userArray: wx.getStorageSync("userArray") || [],
      indexWorkshopStaffPicker: 0,
      workshopStaff: "",
      date: "",
      userId: "",
      warehouseId: "",
      warehouseList: [],
    }
  },

  created() {},
}
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
</style>
